<template>
  <component
    :container-class="`flex flex-col justify-between min-h-full${
      isMobile ? ' _mobile-center-wrapper' : ''
    }`"
    :data-source-mode="DataSourceMode.Pagination"
    :request="getWithdraw"
    :default-page-size="4"
    :is="BasicTable<API.UC.WithdrawHistoryItem>"
  >
    <template #default="{ list, pageSize, loading }">
      <div class="_list" :class="{ _mobile: isMobile }">
        <template v-if="loading">
          <div class="_item _center" v-for="item in pageSize" :key="item">
            <loading class="!w-2.5rem" :track-width="6" />
          </div>
        </template>
        <template v-else>
          <div
            class="_item _deposit-item _container"
            v-for="(item, idx) in list"
            :key="idx"
          >
            <header class="_header">
              <div class="_title-container _title">
                <img :src="DepositIcon" />
                <span>{{ item.amount }}</span>
                <span>{{ item.currency }}</span>
              </div>
              <span class="_time">{{ item.time }}</span>
            </header>
            <div class="_content">
              <ul class="_description-list">
                <li>
                  <label>Transaction ID</label>
                  <span>{{ item.transaction_id || "-" }}</span>
                </li>
                <li>
                  <label>Address</label>
                  <span>{{ item.address }}</span>
                </li>
                <li>
                  <label>Amount USD</label>
                  <span>${{ item.amount }}</span>
                </li>
                <li>
                  <label>Fee USD</label>
                  <span>${{ item.fee }}</span>
                </li>
                <li>
                  <label>Method</label>
                  <span>{{ item.currency }}</span>
                </li>
                <li>
                  <label>Status</label>
                  <span class="text-success">{{ item.status }}</span>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </div>
    </template>
  </component>
</template>

<script lang="tsx" setup>
import { getWithdraw } from "@/api/uc";
import DepositIcon from "@/assets/deposit-icon.png";
import { DataSourceMode } from "@/components/BasicTable/basicTable";
import BasicTable from "@/components/BasicTable/basicTable.vue";
import Loading from "@/components/Loading/loading.vue";
import { useMedia } from "@/hooks/useMedia";

const isMobile = useMedia();
</script>

<style lang="less" scoped>
@import url("../styles/common.less");

._deposit-item {
  ._title-container {
    @apply flex items-center;
    gap: 0.5rem;
    img {
      width: 1.25rem;
      aspect-ratio: 1/1;
      object-fit: contain;
    }
  }

  ._content {
    padding: 2rem 2.25rem;
  }
}
</style>
